<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-31 17:46:49
 * @LastEditTime: 2019-11-28 15:58:02
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>Hello APP</title>
	<link rel="stylesheet" type="text/css" href="../../css/vant.css">
	<link rel="stylesheet" type="text/css" href="../../css/base.css" />
	<script type="text/javascript" src="../../script/jquery.js"></script>
	<script type="text/javascript" src="../../script/layer/mobile/layer.js"></script>
	<script type="text/javascript" src="../../script/vue.min.js"></script>
	<script type="text/javascript" src="../../script/vant.min.js"></script>
	<script type="text/javascript" src="../../script/fastclick.js"></script>
	<script type="text/javascript" src="../../script/base.js"></script>
	<style type="text/css">
		.van-search {
			padding: 6px 0;
			border-bottom: 1px solid #ebedf0;
		}

		.van-search__action {
			color: #cd1b21;
			font-size: 13px;
			font-weight: 700;
		}

		.result {
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
		}

		.desc {
			color: #969799;
		}
	</style>
</head>

<body>
	<div id="app" v-cloak>
		<div class="box">
			<van-nav-bar-main title="筛选" left-arrow @click-left="onClickLeft">
				<div slot="right" v-if="allowClear">
					<span @click="submitRows">确定</span>
					<span @click="clear">清空</span>
				</div>
			</van-nav-bar-main>
			<div class="content flex-box flex-direction-c">
				<div v-if="showSearch">
					<form action="">
						<van-search v-model="filterData[searchKey]" placeholder="请输入搜索关键词" show-action
							@search="getSearchList" v-if="serverSearch">
							<div slot="action" @click="getSearchList">查询</div>
						</van-search>
					</form>
				</div>
				<div class="flex-main result">
					<div v-if="!isPaging">
						<van-cell v-for="row in filterResult" clickable @click="selectRow(row)" v-if="!row.isHide">
							<div>
								<div>{{row.name}}</div>
							</div>
						</van-cell>
					</div>

					<van-list v-model="listLoading" :finished="listFinished" finished-text="没有更多了" @load="listOnLoad"
						immediate-check="false" v-if="isPaging">
						<van-cell v-for="row in filterResult" clickable @click="selectRow(row)">
							<div>
								<div>
									<span v-if="chooseType==1">{{row[displayValue]}}</span>
									<van-checkbox v-else shape="square" v-model="row.checked">{{row[displayValue]}}
									</van-checkbox>

								</div>
							</div>
						</van-cell>
					</van-list>
				</div>
			</div>
		</div>
	</div>
</body>

<script type="text/javascript">
	var vm;
	apiready = function () {
		//$('.init-full').show();
		vm = new Vue({
			el: '#app',
			data: {
				showLoading: false,
				listLoading: false,
				listFinished: true,
				filterData: api.pageParam.param,
				allowClear: api.pageParam.allowClear || false,
				showSearch: api.pageParam.showSearch || false,
				serverSearch: api.pageParam.serverSearch || false,
				searchBy: api.pageParam.searchBy || [],
				displayValue: api.pageParam.displayValue || [],
				hiddenValue: api.pageParam.hiddenValue || [],
				searchKey: api.pageParam.searchKey || '',
				isPaging: api.pageParam.isPaging || false,
				sql: api.pageParam.sql || '',
				chooseType: api.pageParam.chooseType || 1,
				filterResult: [],
				localSearchKey: '',
				isFirstLoadingFinished: false
			},
			created: function () {
				this.filterData[this.searchKey] = '';
				this.getSearchList();
			},
			methods: {
				filterList: function () {
					var that = this;
					for (var i in that.filterResult) {
						var x = 0;
						for (var j in that.searchBy) {
							if (that.filterResult[i][that.searchBy[j]].toUpperCase().indexOf(that.localSearchKey.toUpperCase()) > -1) {
								x = 1;
								this.$set(that.filterResult[i], 'isHide', false);
							}
						}
						if (x == 0) {
							this.$set(that.filterResult[i], 'isHide', true);
						}
					}
				},
				getSearchList: function () {
					var that = this;
					if (that.isPaging) {
						that.filterData.pageIndex = 1;
						that.filterData.pageSize = 30;
					}
					var sql = '';
					if (that.isPaging) {
						sql = "select top " + that.filterData.pageSize + " * from ( SELECT row_number() over(  order by " + that.hiddenValue + " ) as _rownumber ,* FROM (" + that.sql + ")t where " + that.searchKey + " like '%" + that.filterData[that.searchKey] + "%' ) A where _rownumber > " + ((that.filterData.pageIndex - 1) * that.filterData.pageSize).toString() + ""
					}
					else {
						sql = "select * from (" + that.sql + ") t where " + that.searchKey + " like '%" + that.filterData[that.searchKey] + "%'";
					}
					console.log(sql)
					$.ajax({
						url: "http://" + APP.serverIP() + "/SQLData/GetDataBySql",
						async: true,
						data: {
							sql: sql,
							sqlParam: that.filterData
						},
						type: "post",
						dataType: 'json',
						success: function (data) {
							if (data.status == 200) {

								vm.isFirstLoadingFinished = true;
								vm.listLoading = false;
								if (that.isPaging) {
									vm.listFinished = false;
								}
								// if(data.data.ds.length<vm.filterData.pageSize * vm.filterData.pageIndex){
								// 	vm.listFinished = false;
								// }
								// else{
								// 	vm.listFinished = true;
								// }

								vm.listFinished = false;

								vm.filterResult = data.data.ds;
							}
						}
					});
				},
				listOnLoad: function () {
					var that = this;
					if (!that.isFirstLoadingFinished) {
						return;
					}

					that.filterData.pageIndex++;
					var sql = '';
					if (that.isPaging) {
						sql = "select top " + that.filterData.pageSize + " * from ( SELECT row_number() over(  order by " + that.hiddenValue + " ) as _rownumber ,* FROM (" + that.sql + ")t where " + that.searchKey + " like '%" + that.filterData[that.searchKey] + "%' ) A where _rownumber > " + ((that.filterData.pageIndex - 1) * that.filterData.pageSize).toString() + ""
					}
					else {
						sql = "select * from (" + that.sql + ") t where " + that.searchKey + " like '%" + that.filterData[that.searchKey] + "%'";
					}
					console.log(sql)
					$.ajax({
						url: "http://" + APP.serverIP() + "/SQLData/GetDataBySql",
						async: true,
						data: {
							sql: sql
						},
						type: "post",
						dataType: 'json',
						success: function (data) {
							if (data.status == 200) {
								that.listLoading = false;
								if (data.data.ds.length == 0) {
									that.listFinished = true;
								}
								that.filterResult = that.filterResult.concat(data.data.ds);
							}
						}
					});


				},
				selectRow: function (row) {
					var that = this;
					if (vm.chooseType == 1) {
						api.sendEvent({
							name: 'selectRow',
							extra: {
								chooseType: vm.chooseType,
								row: row
							}
						});
						api.closeWin();
					}


				},
				clear: function () {
					var that = this;
					api.sendEvent({
						name: 'selectRow',
						extra: {
							row: null
						}
					});
					api.closeWin();
				},
				submitRows() {
					var that = this;
					var resultRow = [];
					for (var i = 0; i < vm.filterResult.length; i++) {
						if (vm.filterResult[i].checked) {
							resultRow.push(vm.filterResult[i]);
						}
					}

					if (vm.chooseType == 3) {
						api.sendEvent({
							name: 'selectRow',
							extra: {
								chooseType: vm.chooseType,
								row: resultRow
							}
						});
						api.closeWin();
					}
				},
				onClickLeft() {
					api.closeWin();
				}
			}
		})
	};
</script>

</html>